<template>
  <div>
    <el-drawer
      v-if="visible"
      :visible.sync="visible"
      direction="rtl"
      :with-header="false"
      :append-to-body="true"
      class="nal-drawer"
    >
      <div class="title">
        <div class="title-text">投诉单详情--{{ complaintInfo.complainCode }}</div>
        <el-tag class="tag">{{ complaintInfo.cstatus ? formatColumnMap(complaintStatusMap, 'value', complaintInfo.cstatus, 'desc') : '未支付' }}</el-tag>
      </div>
      <!-- 左右布局 -->
      <div class="center">
        <!-- 左侧 -->
        <div class="left">
          <div class="client-box">
            <div class="title">投诉单详情</div>
            <table class="client-table">
              <tr>
                <td class="table-t">投诉单号</td>
                <td class="table-t">客户编号</td>
                <td class="table-t">客户名称</td>
                <td class="table-t">联系电话</td>
                <td class="table-t">所属机构</td>
              </tr>
              <tr>
                <td>{{ complaintInfo.complainCode }}</td>
                <td>{{ complaintInfo.csmCode }}</td>
                <td>{{ complaintInfo.csmName }}</td>
                <td>{{ complaintInfo.csmPhone }}</td>
                <td>{{ complaintInfo.csmOrgName }}</td>
              </tr>
              <tr>
                <td class="table-t">联系地址</td>
                <td colspan="4">{{ complaintInfo.csmAddress }}</td>
              </tr>
            </table>
          </div>
          <div class="client-box">
            <div class="title">投诉详情</div>
            <table class="client-table">
              <tr>
                <td class="table-t">投诉类型</td>
                <td>{{ complaintInfo.complainType ? formatColumnMap(complaintTypeList, 'value', complaintInfo.complainType, 'desc') : '' }}</td>
              </tr>
              <tr>
                <td class="table-t">投诉内容</td>
                <td>{{ complaintInfo.complainContent }}</td>
              </tr>
              <tr>
                <td class="table-t">投诉订单</td>
                <td>{{ complaintInfo.orderCode }}</td>
              </tr>
              <tr>
                <td class="table-t">被投诉人</td>
                <td>{{ complaintInfo.complainUserName }}</td>
              </tr>
            </table>
          </div>
          <div>
            <div v-for="(item,index) in complaintInfo.handleList" :key="index" class="client-box client-w">
              <div class="title">{{ toChinesNum(index+1) }}次处理结果</div>
              <table class="client-table">
                <tr>
                  <td class="table-t">责任机构</td>
                  <td class="table-t">处理时间</td>
                  <td class="table-t">处理人</td>
                </tr>
                <tr>
                  <td>{{ item.handleOrgName }}</td>
                  <td>{{ parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</td>
                  <td>{{ item.handler }}</td>
                </tr>
                <tr>
                  <td class="table-t">处理结果</td>
                  <td colspan="2">{{ item.backVisitDesc }}</td>
                </tr>
              </table>
            </div>
            <div v-for="(item,index) in complaintInfo.backVisitList" :key="index" class="client-box">
              <div class="title">{{ toChinesNum(index+1) }}次回访结果</div>
              <table class="client-table">
                <tr>
                  <td class="table-t">回访人</td>
                  <td class="table-t">回访时间</td>
                  <td class="table-t">回访结果</td>
                </tr>
                <tr>
                  <td>{{ item.createUser }}</td>
                  <td>{{ parseTime(item.backVisitTime, '{y}-{m}-{d}') }}</td>
                  <td>{{ item.callResult?item.callResult===1?'满意':item.callResult===2?'不满意':item.callResult===3?'未回访':'':'' }}</td>
                </tr>
                <tr>
                  <td class="table-t">处理说明</td>
                  <td colspan="2">{{ item.backVisitDesc }}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="right">
          <div class="timeline-title">流转信息</div>
          <el-timeline>
            <el-timeline-item v-for="(item, index) in flowInfoData" :key="index" :timestamp="`${parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}')} ${item.operator}`" placement="top">
              <el-card>
                <h4>{{ item.traceDesc }}</h4>
                <h4 v-if="item.marker">{{ `${item.marker ? item.marker : '备注'}` }}：{{ item.other }}</h4>
                <p>{{ `发生部门&nbsp;——&nbsp;${item.orgName ? item.orgName : '系统'}` }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <!-- 底部 -->
      <div class="demo-drawer__footer" style="padding: 0 10px 10px 0; text-align: right;">
        <div class="btn-group">
          <div class="btns">
            <el-button v-if="complaintData.cstatus === 1 || complaintData.cstatus === 5" v-permission="2" type="primary" @click="$emit('openPressOrder', {...complaintData, billCode: complaintData.complainId, billType: 4, text: '处理'} )">催单</el-button>
            <el-button v-if="complaintData.cstatus === 1 || complaintData.cstatus === 5" v-permission="6" type="primary" @click="$emit('openTransferOrder', complaintData)">转派</el-button>
            <el-button v-if="complaintData.cstatus === 1" v-permission="7" type="danger" @click="$emit('openBackOrder', complaintData)"> 退单 </el-button>
            <el-button v-if="complaintData.cstatus === 1" v-permission="4" type="danger" @click="$emit('dealConfirm', complaintData)"> 处理确认 </el-button>
            <el-button v-if="complaintData.cstatus === 5" v-permission="9" type="primary" @click="$emit('openBackOrderConfirm', complaintData)">退单/确认</el-button>
            <el-button v-if="complaintData.cstatus === 2" v-permission="5" type="primary" @click="$emit('openReturnVisit', complaintData)">回访</el-button>
            <el-button v-permission="8" type="primary" @click="$emit('openRemark', complaintData)">备注</el-button>
          </div>
          <el-button @click="visible = false"> 关闭 </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import { formatColumnMap, toChinesNum } from '@/utils'
  import { parseTime } from '@/filters'
  import { getComplainDetail, queryOrderFlowInfoCommon } from '@/api'
  export default {
    name: 'complaint-complaintData',
    props: {
      complaintStatusMap: {
        type: Array,
        default: () => []
      },
      complaintTypeList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        visible: false,
        activeNames: ['1', '2'],
        distributionWork: {},
        flowInfoData: [],
        complaintInfo: {},
        complaintData: {}
      }
    },
    methods: {
      formatColumnMap,
      toChinesNum,
      parseTime,
      async open(temp) {
        this.visible = true
        if (temp) {
          this.complaintData = temp
          console.log(temp)
          this.getDetail()
          this.getFlowInfoData()
        }
      },
      async getDetail() {
        const params = {
          complainId: this.complaintData.complainId
        }
        const res = await getComplainDetail(params)
        if (res && res.data) {
          this.complaintInfo = res.data
        }
      },
      async getFlowInfoData() {
        if (!this.complaintData.complainId) return
        const res = await queryOrderFlowInfoCommon({
          billCode: this.complaintData.complainId,
          billType: 4
        })
        if (res && res.data) {
          this.flowInfoData = res.data
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.nal-drawer {
  /deep/.el-drawer {
    width: 85% !important;
  }
  /deep/.el-drawer__body {
    margin-bottom: 60px;
  }
  /deep/ .el-collapse-item__header {
    height: 38px;
    padding-left: 10px;
    font-size: 14px;
    line-height: 38px;
    color: #38BDBD;
    border-left: 5px solid #38BDBD;
  }
  .title {
    display: flex;
    padding: 20px 20px 0 20px;
    // margin-bottom: 20px;
    .title-text {
      line-height: 25px;
    }
    .tag {
      margin: 0 10px;
    }
  }
  .center {
    display: flex;
    height: calc(100vh - 120px);
    padding: 0 20px;
    overflow-y: auto;
    // height: 700px;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    text-align: left;
    .left {
      position: relative;
      width: 75%;
      height: 100%;
      padding-right: 20px;
      .client-box {
        margin-top: 20px;
        .title {
          margin-bottom: 10px;
          font-weight: 600;
          color: #38BDBD;
        }
        .client-table {
          width: 100%;
          border-top: 1px solid #e3e3e3;
          border-left: 1px solid #e3e3e3;
          border-spacing: 0;
          tr {
            width: 100%;
            td {
              padding: 10px 0;
              text-align: center;
              border-right: 1px solid #e3e3e3;
              border-bottom: 1px solid #e3e3e3;
            }
            .table-t {
              font-weight: 600;
            }
          }
        }
        &:nth-of-type(2) {
          tr {
            td:nth-child(1) {
              width: 20%;
            }
          }
        }
      }
      .client-w {
        tr {
          td:nth-child(1) {
            width: 20%;
          }
        }
      }
    }

    .right {
      height: 100%;
      padding-left: 15px;
      border-left: 1px solid #e3e3e3;
      flex: 1;
      .timeline-title {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
        color: white;
        background-color: #38BDBD;
        border-radius: 5px;
      }

      .el-timeline {
        margin-top: 20px;
      }
    }
  }

  .demo-drawer__footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 55px;
    background: white;
    border: 2px solid #DCDFE6;
    .btn-group {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      margin-right: 21%;
      .btns {
        display: flex;
        margin-left: 15px;
      }
    }
  }
}
</style>
